<template>
	<view class="product-page page">
		<swiper class="product-banner" autoplay indicator-dots>
			<swiper-item  v-for="(item, i) in product.images" :key="i">
				<image class="product-image-banner" :src="item"></image>
			</swiper-item>
		</swiper>
		<div class="info">
			<view class="p-info">
				<text class="price"><text class="price-prefix">￥</text>{{product.price}}</text>
				<text class="sold-count">已售{{product.soldCount}}</text>
			</view>
			<view class="tags">
				<uni-tag text="满减" type="error" inverted size="small"></uni-tag>
				<uni-tag text="百亿补贴" type="error" inverted size="small"></uni-tag>
			</view>
			<text class="title">{{product.title}}</text>
		</div>
		<view class="sku-select">
			<o-cell>
				<o-cell-item title="请选择" arrow></o-cell-item>
			</o-cell>
		</view>
		<view class="comment">
			<o-cell>
				<o-cell-item title="商品评价(47)" label=" 收到货了，第一时间试了一下，很漂亮特别喜欢，大爱大爱，颜色也很好看。棒棒! " arrow></o-cell-item>
			</o-cell>
		</view>
		<view class="detail">
			<image  v-for="(item, i) in product.desc" :src="item" :key="i" mode="widthFix"></image>
		</view>
		<view class="opt">
			<uni-goods-nav :options="options" fill  @click="handleOpt"></uni-goods-nav>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 options: [{
							icon: 'shop',
							text: '首页',
						}, {
							icon: 'cart',
							text: '购物车',
						}],
					    buttonGroup: [{
					      text: '加入购物车',
					      backgroundColor: '#ff0000',
					      color: '#fff'
					    },
					    {
					      text: '立即购买',
					      backgroundColor: '#ffa200',
					      color: '#fff'
					    }
					    ],
				product: {
					price: 99.98,
					title: '运动连帽拉链卫衣休闲开衫长袖多色运动细绒面料运动上衣',
					soldCount: 200,
					images: [
						'https://cdn-we-retail.ym.tencent.com/tsr/goods/nz-17a.png',
						'https://cdn-we-retail.ym.tencent.com/tsr/goods/nz-17a1.png',
						'https://cdn-we-retail.ym.tencent.com/tsr/goods/nz-17b.png',
						'https://cdn-we-retail.ym.tencent.com/tsr/goods/nz-17b1.png',
					],
					desc: [
					      'https://cdn-we-retail.ym.tencent.com/tsr/goods/dz-3c.png',
					      'https://cdn-we-retail.ym.tencent.com/tsr/goods/dz-3d.png',
					    ]
				}
				
			}
		},
		methods: {
			handleOpt(e){
				let path = ['/pages/index/index', '/pages/cart/cart'][e.index]
				if (path) {
					uni.switchTab({
						url:path
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product-banner {
		height: 375px;
	}

	.product-image-banner {
		width: 100%;
		height: 100%;
	}
	.detail{
		image{
			width: 100%;
		}
	}
	.product-page {
		background: #eee;
		min-height: 100vh;
		.info{
			background: #fff;
			padding: 5px 14px;
			.p-info{
				display: flex;
				align-items: center;
				.price{
					font-weight: bold;
					flex: 1;
					font-size: 34px;
					color: #fa4126;
					.price-prefix{
						font-size: 16px;
					}
				}
				.sold-count{
					color: #999;
					font-size: 12px;
				}
			}
			.tags{
				display: flex;
				gap: 8px;
				margin: 8px 0;
			}
			.title{
				color: #333;
				font-size: 16px;
			}
		}
		.sku-select{
		}
		.opt{
			background: #fff;
			position: fixed;
			padding-bottom: var(--safe-area-inset-bottom);
			bottom: 0;
			left:0;
			right: 0;
		}
	}
</style>